<template>
  <el-card shadow="never" class="border-0">
    <!-- 新增刷新 -->
    <ListHeader @refresh="getData" @create="handleCreate"></ListHeader>

    <el-tree
      v-loading="loading"
      node-key="id"
      :default-expanded-keys="defaultExpandedKeys"
      :data="tableData"
      :props="{ label: 'name', children: 'chlid' }"
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <el-tag size="small" :type="data.is_menu ? '' : 'info'">{{
            data.is_menu ? "菜單" : "權限"
          }}</el-tag>
          <el-icon v-if="data.icon" :size="16" class="ml-2">
            <component :is="data.icon"></component>
          </el-icon>
          <span> {{ data.name }}</span>

          <div class="ml-auto">
            <el-switch
              @click.stop
              v-model="data.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange($event, data)"
            />

            <el-button
              text
              type="primary"
              size="small"
              class="ml-10"
              @click.stop="handleEdit(data)"
            >
              修改
            </el-button>
            <el-button
              text
              type="primary"
              size="small"
              @click.stop="addChild(data.id)"
              >增加</el-button
            >
            <el-popconfirm
              confirm-button-text="確定"
              cancel-button-text="取消"
              @confirm="handleDelete(data.id)"
              title="確定要刪除嗎?"
            >
              <template #reference>
                <el-button text type="primary" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </template>
    </el-tree>

    <FormDrawer ref="formDrawerRef" @submit="handleSubmit" :title="drawerTitle">
      <el-form :model="form" ref="formRef" :rules="rules" label-width="auto">
        <el-form-item label="上級菜單" prop="pid">
          <el-cascader
            v-model="form.pid"
            :options="menus"
            :props="{
              label: 'name',
              children: 'child',
              checkStrictly: true,
              emitPath: false,
              value: 'id',
            }"
            clearable
            placeholder="選擇菜單"
            filterable
          />
        </el-form-item>
        <el-form-item label="菜單/規則">
          <el-radio-group v-model="form.is_menu">
            <el-radio :label="1" border>菜單</el-radio>
            <el-radio :label="0" border>規則</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名稱" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="路由" v-if="form.is_menu == 1 && form.pid > 0">
          <el-input v-model="form.path"></el-input>
        </el-form-item>
        <el-form-item label="菜單圖標">
          <IconSelect v-model="form.icon"></IconSelect>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.sort" />
        </el-form-item>
      </el-form>
    </FormDrawer>
  </el-card>
</template>

<script setup>
import { computed, ref } from "vue";
import ListHeader from "~/components/ListHeader.vue";
import FormDrawer from "~/components/FormDrawer.vue";
import IconSelect from "~/components/IconSelect.vue";
import { useInitTable, useInitForm } from "~/composables/useCommon.js";
import {
  getAccess,
  createAccess,
  updateAccess,
  deleteAccess,
} from "~/api/access.js";
import { useStore } from "vuex";
import { fromJSON } from "postcss";
const store = useStore();

const defaultExpandedKeys = ref([]);
const { tableData, getData, loading, handleDelete, handleStatusChange } =
  useInitTable({
    getList: getAccess,
    delete: deleteAccess,
    onGetListSuccess: (res) => {
      tableData.value = res;
      defaultExpandedKeys.value = res.map((o) => o.id);
    },
    updateStatus: updateAccess,
  });

const menus = store.state.user;
const {
  formDrawerRef,
  formRef,
  form,
  rules,
  drawerTitle,
  handleSubmit,
  handleCreate,
  handleEdit,
} = useInitForm({
  form: {
    pid: 0,
    is_menu: 1,
    name: "",
    path: "",
    icon: "",
    sort: 1,
    status: 1,
  },
  getData,
  rules: {
    name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  },
  create: createAccess,
  update: updateAccess,
});

const addChild = (id) => {
  handleCreate();
  form.pid = id;
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-right: 8px;
}
.el-tree-node__content {
  padding: 20px 0;
}
</style>
